<template>
	<view class="viewpage">
		<u-navbar title="充电状态" :border-bottom="false" back-icon-color="#ffffff" :background="background"
			title-color="#ffff" title-size="36"></u-navbar>
		<view class="scale">
			<div class="gis-live">
				<u-circle-progress active-color="#6A94E8" bg-color="unset" width="276" :percent="details.runStatusVo.progress">
					<div class="circle">
						<view class="u-progress-content">
							<view class="u-progress pencent">{{details.runStatusVo.progress}}%</view>
							<text class='u-progress-info' v-if="details.pdCharginOrder.buyType == 1 ">充满即停</text>
							<text class='u-progress-info' v-if="details.pdCharginOrder.buyType == 2 ">购买{{details.pdCharginOrder.purchaseQuantity}}度电</text>
							<text class='u-progress-info' v-if="details.pdCharginOrder.buyType == 3 ">购买{{details.pdCharginOrder.purchaseQuantity}}小时</text>
						</view>
					</div>
				</u-circle-progress>
				<div class="shineCircle2"></div>
				<div class="shineCircle3"></div>
			</div>
		</view>

		<view class="charge_num">
			<image src="../../static/images/icons/icon-charging.png" mode=""></image>
			<view class="num">{{details.pdCharginOrder.deviceCode}} - {{details.pdCharginOrder.portNum}}号端口</view>
		</view>
		<view class="status_details_wraper">
			<view class="_body">
				<view class="_top">
					<view class="content" @click="selectVisible = !selectVisible">
						<image src="../../static/images/icons/icon-circle-charging.png" mode=""></image>
						<view class="order_text">{{details.pdCharginOrder.id}} </view>
						<image class="icon_down" src="../../static/images/icons/icon-arrow-down.png" mode=""></image>
					</view>
					
					<view class="modallist" v-if="selectVisible" >
						<view class="li" v-for="(item,i) in orderList" :key="i" @click="findid(item)">{{item.pdCharginOrder.id}}</view>
					</view>
				</view>

				<view class="list">
					<view class="li">
						<image src="../../static/images/icons/icon-time-outline.png" mode=""></image>
						<view class="tab_text">累计充电</view>
					</view>
					<view class="li" @click="toOrderList">
						<image src="../../static/images/icons/icon-time-outline.png" mode=""></image>
						<view class="tab_text">总时长</view>
					</view>
					<view class="li">
						<image src="../../static/images/icons/icon-found.png" mode=""></image>
						<view class="tab_text">口袋币</view>
					</view>
				</view>
				
				<view class="line"><u-line color="#BCBCBC"/>	</view>
				
				<view class="value_list">
					<view class="_li">{{details.pdCharginOrder.elecConsume}} 度</view>
					<view class="_li">{{details.runStatusVo.duration}}</view>
					<view class="_li">{{details.pdCharginOrder.coinsConsume}} PdConin</view>
				</view>
			</view>
		</view>
		<view class="endchar" @click="endchar">
			<view class="text">
				结束订单
			</view>
		</view>
		<view class="copyright">
			<view>Copyright©2021</view>
			<view>领程工场软件科技 IOT物联网平台</view>
		</view>
		<!-- 遮罩层 -->
		<view class="maskshop" v-if="shopstop == true"></view> 
	</view>
</template>

<script>
	import {findCharginOrderList ,stopOrder} from '../../api/charging'
	export default {
		data() {
			return {
				shopstop:false,
				selectVisible: false,
				background: {
					backgroundColor: 'transparent'
				},
				orderList: [],
				query:{
					orderStatus:1,
					pageNo:1,
					pageSize:10,
				},
				details:''
			};
		},
		onLoad() {
			this.getOrderList();	
		},
		methods: { 
			endchar(){
				console.log(this.details)
				this.shopstop = true
				stopOrder(this.details.pdCharginOrder.id).then(res=>{
					if(res.code ==200){
						
						this.shopstop = false
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon:'success'
						});
						
						setTimeout(function () {
							uni.navigateTo({
								url:'./order-detail?orderId='+res.result
							})
						}, 1000);
					}
				})
			},
			findid(row){
				console.log(row,'选择哪一个')
				this.details = row
				this.selectVisible = false
			},
			async getOrderList() {
						await findCharginOrderList(this.query).then(res => {
							this.orderList = res.result.records
							this.details = res.result.records[0]
							console.log(res.result.records.length ,'时更要注意')
							
							if(res.result.records.length == 0){
								uni.showToast({
									title: '没有进行中订单',
									duration: 1000,
									icon:'error'
								});
								
								
								setTimeout(function () {
								    uni.reLaunch({
								    	url:'../index/index'
								    })
								}, 1000);
							
							}
						})
						// this.loadStatus.splice(this.current, 1, "loadmore")
					},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.endchar{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		margin: 0 auto;
		height: 100rpx;
		margin-top: 100rpx;
		background-image: url('https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/XX2k5Us0xQ8k759c77117db2b8dfcca1760f38113b68_1632883684985.png') ;
		background-size: 100% ;
		border-radius: 16rpx;
		image {
			width: 46rpx;
			height: 26rpx;
		}
		.text {
			margin-left: 14rpx;
			font-size: 30rpx;
			color: #ffffff;
			font-weight: 400;
		}
	}
	.viewpage {
		width: 100%;
		min-height: 100%;
		background-image: url('http://bytedev-gd8d.oss-cn-shenzhen.aliyuncs.com/upload/2021-9-10/1631259459022编组 8@2x.png');
		background-size: 100%;
	}

	.circle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 246rpx;
		height: 246rpx;
		border-radius: 50%;
		background-color: #fff;
		text-align: center;

		.pencent {

			font-weight: 500;
			font-size: 40rpx;
			color: #0A348B;
		}

		.u-progress-info {

			font-size: 24rpx;
			font-weight: 400;
			color: #6A94E8;
			margin-top: 14rpx;
		}

	}

	.u-circle-progress {
		width: 276rpx;
		height: 276rpx;
		background-color: unset;
	}

	.charge_num {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}

		.num {

			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	}

	.status_details_wraper {
		width: 100%;
		padding: 0rpx 30rpx;
		margin-top: 40rpx;
		._body {

			border-radius: 28rpx;
			box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(10, 52, 139, 0.12);
			background: #FFFFFF;
			// overflow: hidden;
		}

		._top {
			padding: 28rpx 0rpx;
			box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(10, 52, 139, 0.12);
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.content {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 46rpx;
					height: 46rpx;

				}

				.order_text {
					margin-left: 20rpx;
					color: #000000;
					font-weight: 400;
					font-size: 32rpx;
				}

				.icon_down {
					margin-left: 14rpx;
					margin-top: 4rpx;
					width: 20rpx;
					height: 12rpx;
				}
			}
			.modallist{
				position: absolute;
				width: 100%;

				top:100rpx;
				text-align: center;
				background-color: #FFFFFF;
				z-index: 999;
				border-bottom-left-radius: 28rpx;
				border-bottom-right-radius: 28rpx;
				.li{
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					border-bottom:1rpx solid #BCBCBC;
				}
				.li:nth-child(1){
					box-shadow:0rpx -6rpx 15rpx 5rpx rgba(10, 52, 139, 0.12)
				}
			}
		}
		
		
		.line{
			display: flex;
			padding: 0rpx 40rpx;
			justify-content: center;
		}
		.list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-weight: 400;
			color: #0a348b;
			margin-top: 34rpx;
			margin-bottom: 32rpx;
		
			.li {
				
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
		
				image {
					width: 44rpx;
					height: 44rpx;
				}
		
				.tab_text {
					font-size: 28rpx;
					margin-top: 6rpx;
				}
			}
		
		
		}
		.value_list{
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 30rpx;
			padding-bottom: 36rpx;
			._li{
				
font-size: 26rpx;
				font-weight: 400;
				color: #000000;
			}
		}
	}
</style>
